<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="mycomponent">
        <span>总共有{{ message }}个事项,{{done}}个已完成,{{message-done}}个未完成.</span>
    </script>
    <script>
        window.onload = function () {
            Vue.component('tdllength', {
                props: ['message', 'done'],
                template: '#mycomponent'
            })
            var app1 = new Vue({
                el: '#app-1',
                methods: {
                    addtext: function () {
                        this.todolist.push({name: this.nr, done: false});
                    },
                    switchdel: function (index) {
                        this.todolist[index].done = !this.todolist[index].done;
                    }
                },
                data: {
                    nr: '',
                    todolist: [
                        {name: '吃饭', done: false}, {name: '睡觉', done: false}, {name: 'hhh', done: false}
                    ]
                },
                computed: {
                    finish: function () {
                        var count = 0;
                        for (var i = 0; i < this.todolist.length; i++) {
                            if (this.todolist[i].done) {
                                count++;
                            }
                        }
                        return count;
                    }
                }
            })
        }
    </script>
    <style>.del {
        text-decoration: line-through
    }</style>
</head>
<body>
<p>Todo List</p>
<div id="app-1">
    <input type="text" v-model="nr" v-on:keyup.enter="addtext">
    <button v-on:click="addtext">增加</button>
    <br>
    <div v-for="(text,index) in todolist">
        <input type="checkbox" v-bind:check="text.done" v-on:click="switchdel(index)">{{index}}.
        <span v-bind:class="{del:text.done}">{{text.name}}</span>
    </div>
    <div>
        <tdllength :message="todolist.length" :done="finish"></tdllength>
    </div>
</div>
</body>
</html>